import { paintPropertyNameMap } from '@/components/gis/layer-tags/attribute-tag/tags'

/**
 * gis map 添加图层
 */

// 点图层的默认色
export const defaultPointRadius: number = 5
export const defaultPointColor: string = '#ff0000'
export const defaultPointHoverColor: string = '#aed495'
export const defaultPointSelectColor: string = '#aed495'

// 线图层的默认色
export const defaultLineWidth: number = 3
export const defaultLineColor: string = '#345678'
export const defaultLineHoverColor: string = '#aed495'
export const defaultLineSelectColor: string = '#aed495'

// 面图层的默认色
export const defaultPolygonColor: string = '#467be8'
export const defaultPolygonHoverColor: string = '#aed495'
export const defaultPolygonSelectColor: string = '#aed495'

// 点线面图层默认色 map
export const defaultColor: { [key: string]: string } = {
  point: defaultPointColor,
  line: defaultLineColor,
  polygon: defaultPolygonColor,
}

/**
 * 点图层的默认配色方案
 */
export function defaultPointLayerStylesSuperGlobalInfo(globalInfo?: any): any {
  const globalPaint: any = globalInfo?.paint ? globalInfo.paint : {}
  return {
    paint: {
      'circle-color': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        defaultPointHoverColor,
        ['boolean', ['feature-state', 'select'], false],
        defaultPointSelectColor,
        globalInfo?.globalColor || defaultPointColor,
      ],
      'circle-opacity': globalInfo?.globalOpacity || 1,
      'circle-radius': defaultPointRadius,
      ...globalPaint,
    },
  }
}

export function defaultLineLayerStylesSuperGlobalInfo(globalInfo?: any): any {
  const globalPaint: any = globalInfo?.paint ? globalInfo.paint : {}
  return {
    paint: {
      'line-color': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        defaultLineHoverColor,
        ['boolean', ['feature-state', 'select'], false],
        defaultLineSelectColor,
        globalInfo?.globalColor || defaultLineColor,
      ],
      'line-opacity': globalInfo?.globalOpacity || 1,
      'line-dasharray': [1],
      'line-width': defaultLineWidth,
      ...globalPaint,
    },
  }
}

export function defaultPolygonLayerStylesSuperGlobalInfo(
  globalInfo?: any
): any {
  const globalPaint: any = globalInfo?.paint ? globalInfo.paint : {}
  return {
    paint: {
      'fill-color': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        defaultPolygonHoverColor,
        ['boolean', ['feature-state', 'select'], false],
        defaultPolygonSelectColor,
        globalInfo?.globalColor || defaultPolygonColor,
      ],
      'fill-opacity': globalInfo?.globalOpacity || 1,
      ...globalPaint,
    },
  }
}

/**
 * 合并图层属性标记样式
 * @param layer
 */
function concatLayerStyles(layer: any): any {
  const { type, data, visible } = layer
  // 默认样式
  const styles: any = {
    paint: {},
    layout: {
      visibility: visible ? 'visible' : 'none',
    },
  }
  let defaultStyleByGlobal: any = {}
  if (type === 'circle') {
    defaultStyleByGlobal = defaultPointLayerStylesSuperGlobalInfo(
      data?.tagInfo?.globalInfo
    )
  } else if (type === 'line') {
    defaultStyleByGlobal = defaultLineLayerStylesSuperGlobalInfo(
      data?.tagInfo?.globalInfo
    )
  } else if (type === 'fill') {
    defaultStyleByGlobal = defaultPolygonLayerStylesSuperGlobalInfo(
      data?.tagInfo?.globalInfo
    )
  }
  if (defaultStyleByGlobal && defaultStyleByGlobal.paint) {
    styles.paint = defaultStyleByGlobal.paint
  }
  if (defaultStyleByGlobal && defaultStyleByGlobal.layout) {
    styles.layout = defaultStyleByGlobal.layout
  }
  if (data?.tagInfo && data?.tagInfo.attributeTag) {
    data.tagInfo.attributeTag
      .filter((tag: any) => tag.tagType === 'color' || tag.tagType === 'size')
      .forEach((tag: any) => {
        const { paint, layout } = tag.config
        if (paint) {
          styles.paint = { ...styles.paint, ...paint }
        }
        if (layout) {
          styles.layout = {
            ...styles.layout,
            ...layout,
          }
        }
      })
  }
  return styles
}

// 添加点
export function addPoint(mapboxInstance: any, layer: any, beforeId?: string) {
  const isLayerId: boolean = typeof layer === 'number'
  const layerId: number = isLayerId ? layer : layer.id
  const sourceId: string = `source-${layerId}`
  // 将点添加到一个图层中，在地图中显示
  const layerIdString: string = String(layerId)
  const styles: any = concatLayerStyles(layer)
  const layerInfo: any = {
    id: layerIdString,
    type: 'circle',
    renderingMode: '2d',
    source: sourceId,
    ...styles,
  }
  // 图层信息
  if (!isLayerId) {
    layerInfo.metadata = {
      name: layer.name,
    }
  }
  if (beforeId) {
    mapboxInstance.addLayer(layerInfo, beforeId)
  } else {
    mapboxInstance.addLayer(layerInfo)
  }
}

// 添加线
export function addLine(mapboxInstance: any, layer: any, beforeId?: string) {
  const isLayerId: boolean = typeof layer === 'number'
  const layerId: number = isLayerId ? layer : layer.id
  const sourceId: string = `source-${layerId}`
  // 将点添加到一个图层中，在地图中显示
  const layerIdString: string = String(layerId)
  const styles: any = concatLayerStyles(layer)
  const layerInfo: any = {
    id: layerIdString,
    type: 'line',
    renderingMode: '2d',
    source: sourceId,
    ...styles,
  }
  if (!isLayerId) {
    layerInfo.metadata = {
      name: layer.name,
    }
  }
  if (beforeId) {
    mapboxInstance.addLayer(layerInfo, beforeId)
  } else {
    mapboxInstance.addLayer(layerInfo)
  }
}

// 添加面图层
export function addPolygon(mapboxInstance: any, layer: any, beforeId?: string) {
  const isLayerId: boolean = typeof layer === 'number'
  const layerId: number = isLayerId ? layer : layer.id
  const sourceId: string = `source-${layerId}`
  // 将多边形添加到一个图层中，在地图中显示
  const layerIdString: string = String(layerId)
  const styles: any = concatLayerStyles(layer)
  const layerInfo: any = {
    id: layerIdString,
    type: 'fill',
    source: sourceId,
    ...styles,
  }
  if (!isLayerId) {
    layerInfo.metadata = {
      name: layer.name,
    }
  }
  if (beforeId) {
    mapboxInstance.addLayer(layerInfo, beforeId)
  } else {
    mapboxInstance.addLayer(layerInfo)
  }
}

/**
 * 修改点图层颜色， 及大小
 * @param mapboxInstance
 * @param layerId
 * @param name
 * @param value
 */
export function changePointLayerPaint(
  mapboxInstance: any,
  layerId: string,
  name: string,
  value: any
) {
  mapboxInstance.setPaintProperty(layerId, name, value)
}

/**
 * 更新图层样式
 * @param mapboxInstance
 * @param layerId
 * @param name
 * @param value
 * @param type
 */
export function updateLayerPaintByLayerId(
  mapboxInstance: any,
  layerId: string,
  name: string,
  value: any,
  type: 'circle' | 'line' | 'fill'
) {
  if (type === 'circle') {
    mapboxInstance.setPaintProperty(layerId, name, value)
  } else if (type === 'line') {
    mapboxInstance.setPaintProperty(layerId, name, value)
  } else if (type === 'fill') {
    mapboxInstance.setPaintProperty(layerId, name, value)
    console.log('ddd')
  }
}

const paintPropertySizeMap: { [layerType: string]: string } = {
  circle: 'circle-radius',
  line: 'line-width',
}

/**
 * 根据全局（颜色，大小）， 默认（颜色，大小）对图层进行初始化
 * @param mapboxInstance 地图实例
 * @param layerId 图层id
 * @param layerType 图层类型: circle line fill
 * @param tagType 图层 tag 类型: color size label detail
 * @param initConfig 初始化数据
 */
export function initPaintByLayerIdAndTagType(
  mapboxInstance: any,
  layerId: string,
  layerType: string,
  tagType: string,
  initConfig: any
) {
  if (tagType === 'color') {
    const paintKey: string = paintPropertyNameMap[layerType]
    const color: string = initConfig.globalColor || defaultColor[layerType]
    mapboxInstance.setPaintProperty(layerId, paintKey, color)
  } else if (tagType === 'size') {
    const paintKey: string = paintPropertySizeMap[layerType]
    const size: string =
      initConfig.size ||
      (layerType === 'circle' ? defaultPointRadius : defaultLineWidth)
    mapboxInstance.setPaintProperty(layerId, paintKey, size)
  }
}

/**
 *  添加图层 label
 * @param mapboxInstance mapbox 实例
 * @param layer 图层
 * @param config 配置
 * {
 *    paint: {'text-color': string, 'text-opacity': number},
 *    layout: {'text-field': string, 'text-size': number, text-font: string}
 * }
 * @param beforeId 位置
 */
export function addSymbolLabelLayerByConfig(
  mapboxInstance: any,
  layer: any,
  config: any,
  beforeId?: string
) {
  mapboxInstance.addLayer(
    {
      id: `label-${layer.id}`,
      type: 'symbol',
      source: `source-${layer.id}`,
      paint: config.paint,
      layout: config.layout,
    },
    beforeId
  )
}
